<template>
  <div id="app" class="content"> 
                
                <div class="reporter_num" >
                      <div class="col_tit">在线记者人数</div>
                      <dv-loading style="width: 100%;height: 100%;" v-if="loading">Loading...</dv-loading>
                      <div v-else id="reporter"></div>
                </div>
    
                <div class="media_num">
                      <div class="col_tit">热点排行</div>
                      <dv-loading style="width: 100%;height: 100%;" v-if="loading">Loading...</dv-loading>
                      <div v-else id="media"></div>
                </div>
              
               
                <div class="news">
                <div class="col_tit">亚运新闻热点</div>
                    <div class="news_div">
                      <dv-loading style="width: 100%;height: 100%;" v-if="loading">Loading...</dv-loading>
                        <!-- <dv-scroll-board class="news_box" :config="config"/> -->
                        <ul v-else class="news_ul">
                            <li class="news_li" :class="[index<3 ? 'news_index_active':0]" v-for="(item,index) in arr_7" :key="index">
                                <div v-if="index==0" class="news_index"><img style="width:20px;height:23px;vertical-align: middle;" src="./../../static/images/num1.png" alt=""></div>
                                <div v-else-if="index==1" class="news_index"><img style="width:20px;height:23px;vertical-align: middle;" src="./../../static/images/num2.png" alt=""></div>
                                <div v-else-if="index==2" class="news_index"><img style="width:20px;height:23px;vertical-align: middle;" src="./../../static/images/num3.png" alt=""></div>
                                <div v-else class="news_index">{{'0'+(index+1)}}</div>
                                <div class="news_li_txt">{{ item.copyAbstracts }}</div>
                            </li>
                            
                        </ul>
                    </div>
                </div>

                <div class="ranking">
                <div class="col_tit" style="top:-1px">各大平台亚运热度排行</div>
                      <dv-loading style="width: 100%;height: 100%;" v-if="loading">Loading...</dv-loading>
                      <div v-else class="rank_box">
                              <div class="rank_box_top">
                                  <div class="rank_box_top_item" v-for="(item,index) in rank" :key="item+index">
                                      <span style="color: #FEDB65;">{{ item.value }}</span>
                                      <div class="rank_box_top_item_div">
                                          <span class="rank_box_top_item_div1_txt">{{ item.name }}</span></div>
                                  </div>
              
                              </div>
                      </div>
                </div>
                  
                <div  class="media_guide" >
                  <div class="col_tit">媒体指南在线</div>
                            <div class="progress_item" v-for="(item,index) in progress" :key="index">
                                <div class="pre_tit_div">
                                   <span class="pre_tit">{{ item.title }}</span>  <span class="pre_num">{{ item.num }}</span>
                                </div>
                                <div class="pro_div" >
                                   <div :style="{'width':getWidth(index)}"  class="myprogress"></div>
                                </div>        
                              </div>
                </div>

                <div class="media_service">
                          <div class="col_tit">媒体服务在线</div>
                          <div class="system_btn_div">
                              <div class="system_btn_div_left">
                                    <div class="jtcx">
                                      <img src="./../../static/images/jtcx.png" class="s_icon" alt="">
                                      <div class="jtcx_div">
                                            <span class="span1">交通查询</span>
                                            <span class="span2">{{ serverOnline.traffic }}</span>
                                      </div>
                                    </div>
                                    <div class="jtcx">
                                      <img src="./../../static/images/jtyd.png" class="s_icon" alt="">
                                      <div class="jtcx_div">
                                            <span class="span1">交通预定</span>
                                            <span class="span2">{{ serverOnline.traffic_order }}</span>
                                      </div>
                                    </div>
                              </div>
                              <div class="system_btn_div_right">
                                    <div class="jtcx">
                                      <img src="./../../static/images/cyyd.png" class="s_icon" alt="">
                                      <div class="jtcx_div">
                                            <span class="span1">收费卡</span>
                                            <span class="span2">{{ serverOnline.card }}</span>
                                      </div>
                                    </div>
                                    <div class="jtcx">
                                      <img src="./../../static/images/zscx.png" class="s_icon" alt="">
                                      <div class="jtcx_div">
                                            <span class="span1">住宿查询</span>
                                            <span class="span2">{{ serverOnline.accommodation }}</span>
                                      </div>
                                    </div>
                              </div>
                          </div>
                </div>
                
                <div class="media_con_hot">
                    <div class="col_tit">媒体内容热度</div>
                    <div id="media_content"></div>
                </div>
                <div class="city_elegant">
                    <dv-loading style="width: 100%;height: 100%;" v-if="loading">Loading...</dv-loading>
                     <template v-else>
                          <div class="col_tit">城市采风</div>
                          <div class="city_yy">
                                <div style="color: #fff;width:100%;text-align: left;margin:10px 0">杭州</div>
                                <div class="yuyue">
                                    <div class="yuyue_item" v-for="(item,index) in cities[1].city_orders" :key="item+index">{{ item }}</div>
                                  
                                </div>
                          </div>
                          <div class="city_yy" style="margin-top:20px;">
                                <div style="color: #fff;width:100%;text-align: left;margin:10px 0">其他城市</div>
                                <div class="yuyue">
                                    <div class="yuyue_item"  v-for="(item,index) in cities[0].asian_games" :key="item+index">{{ item }}</div>
                                  
                                </div>
                          </div>
                     </template>
                </div>
 </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
          arr: [],
         progress:[],
         rank:[],
         medias:[],
         reporter_num:[],
         reporter_arr:[],
         loading:true,
         serverOnline:{},
         mediaContent_arr:[],
         mediaContent_num:[],
         cities:[]
    }
  },
  created(){
    // window.addEventListener('resize',()=>{
    //   this.resize()
    //   this.reRefresh()
    // },true)
    document.title='媒体在线'
    this.getData()
    setInterval(()=>{
        this.getData()
    },600000)
    
  },
  computed:{
      getWidth(){
        var width = 375
        console.log(width)
        return function(ind){
          var new_num = 0
             this.progress.forEach(item => {
                new_num = new_num + item.num
             });
             if(new_num==0){
                 return  0
             }else{
                 return (this.progress[ind].num/new_num)*(width-200)  + 'px'
             }    
        }
           
      },
      arr_7(){
        if(this.arr instanceof Array){
            return this.arr.filter((value,index)=>{
                return index<=6
            })
          }
      }
  },
  methods:{
    // 获取数据
    getData(){
         this.$axios.get('/api/dashboard').then((res)=>{
               if(res.data.message=='success'){
                this.progress = []
                this.arr = []
                this.rank = []
                this.serverOnline = {}
                this.cities = []
                this.arr = res.data.data.news
                this.reporters = res.data.data.reporters
                this.rank = res.data.data.hots
                this.serverOnline = res.data.data.serverOnline
                this.cities = res.data.data.cities
                if(this.rank instanceof Array){
                  localStorage.setItem('rank',this.rangk)
                }else{
                  this.rank = localStorage.getItem('rank')
                }
                if(this.arr instanceof Array){
                  localStorage.setItem('arr',this.arr)
                }else{
                  this.arr = localStorage.getItem('arr')
                }
                this.loading = false
                res.data.data.mediaOnline.forEach((item,index)=>{
                  var obj = {}
                  for(var j in item){
                    obj['title'] = j
                    obj['num'] = item[j]
                  }
                  this.progress.push(obj)
                })
                
                this.$nextTick(()=>{
                     this.reporter_arr = []
                     this.reporter_num = []
                     this.mediaContent_arr = []
                     this.mediaContent_num = []
                     this.medias =  []
                      res.data.data.reporters.forEach((item)=>{
                              for(var j in item){
                                this.reporter_arr.push(j)
                                this.reporter_num.push(item[j])
                              }
                      })
                      this.getReporter(this.reporter_arr,this.reporter_num)
                      res.data.data.wordCloud.forEach((item)=>{
                      var obj = {}
                      obj['name'] = item.name
                      obj['value'] = item.value
                      this.medias.push(obj)
                      })
                      res.data.data.mediaContent.forEach((item)=>{
                              for(var j in item){
                                this.mediaContent_arr.push(j)
                                this.mediaContent_num.push(item[j])
                              }
                      })
                      this.getMediaContent(this.mediaContent_arr,this.mediaContent_num)
                      this.getMedia(this.medias)
                })
               }
         })
    },
    reRefresh(){
        this.$router.go(0)
    },
    //  记者人数图
     getReporter(arr1,arr2){
     
        var myChart = this.$echarts.init(document.getElementById('reporter'));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            data: arr1,
            axisLabel: {
              // rotate: 45,
              formatter: val => {
                let txt = val
                if (val.length > 3) {
                  txt = val.substr(0, 3) + '...'
                }
                return txt
              },
              show: true,
              textStyle: {
                color: '#fff',
              },
            },    
    
          },
          yAxis: {
             splitLine:{
              show:true,
              lineStyle:{
                color:'#1e2c58'
              }
                
            },
          },
          series: [
            {
              barWidth:'10%',
              type: 'bar',
              data: arr2,
              color: {
                              type: 'linear',
                              x: 0,
                              y: 1,
                              colorStops: [
                                // 0%处的颜色
                                {
                                  offset: 0,
                                  color: '#00CCD2',
                                },
                                // 100%处的颜色
                                {
                                  offset: 1,
                                  color: '#00A2FF',
                                },
                              ],
                              global: false // 缺省为 false
                     }

            }
          ]
        });
     },
     //  媒体内容在线图
     getMediaContent(arr1,arr2){
        var myChart = this.$echarts.init(document.getElementById('media_content'));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            data:arr1,
            axisLabel: {
              // rotate: 45,
              formatter: val => {
                let txt = val
                if (val.length > 3) {
                  txt = val.substr(0, 3) + '...'
                }
                return txt
              },

              show: true,
              textStyle: {
                color: '#fff',
              },
            },         
          },
          yAxis: {
                 splitLine:{
                  show:true,
                  lineStyle:{
                    color:'#1e2c58'
                  }
                
            },
          },
          series: [
            {
              barWidth:'10%',
              type: 'bar',
              data: arr2,
              color: {
                              type: 'linear',
                              x: 0,
                              y: 1,
                              colorStops: [
                                // 0%处的颜色
                                {
                                  offset: 0,
                                  color: '#00CCD2',
                                },
                                // 100%处的颜色
                                {
                                  offset: 1,
                                  color: '#00A2FF',
                                },
                              ],
                              global: false // 缺省为 false
                     }

            }
          ]
        });
     },
    // 热点排行
      getMedia(arr) {
        var myChart = this.$echarts.init(document.getElementById('media'));
      myChart.setOption({
        series: [
          {
            type: "wordCloud",
            shape: "pentagon",
            size:['100%','100%'],
            drawOutOfBound: false,
            sizeRange:[10,30],
            textpADDING:30,
            rotationRange:[0,0],
            gridSize:8,
            textStyle: {
                fontFamily: '微软雅黑',
              // fontWeight: 'bold',
                color: function() {
                // Random color
                    return 'rgb(' + [
                        Math.round(Math.random() * 200),
                        Math.round(Math.random() * 250),
                        Math.round(Math.random() * 250)
                          ].join(',') + ')';
                  }
            },
            data: arr,
          }
        ]
      });
    } 
  },
}
</script>
<style scoped>
html,body{
  width: 100%;
  margin: 0;
  padding: 0;
 
}
.content{
    width: 100%;
    height: auto;
    background: url('./../../static/images/con_bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
 
}
.item{
    box-sizing: border-box;
    margin: 15px;
    width: 100%;
    height:calc(100% - 60px);
}
/* 记者人数 */
.reporter_num{
    margin-top:15px;
    width: calc(100% - 30px);
    height: 345px;
    background: url('./../../static/images/reporter_num.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.col_tit{
  width:100%;
  height: 26px;
  line-height:26px;
  color: #19ecff;
  font-size: 14px;
  position: absolute;
  top: 3px;
  left: 0;
  text-align: center;
}
#reporter{
  width: 100%;
  height: 100%;
}
/* 各媒体人数 */
.media_num{
    margin-top:15px;
    height:273px;
    width: calc(100% - 30px);
    background: url('./../../static/images/per.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: relative;
}
#media{
  width: 100%;
    height:100%;

}
/* 亚运新闻热点 */
.news{
    margin-top:15px;
    width: calc(100% - 30px);
    background: url('./../../static/images/news.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 60px 0px 30px 0px;
    position: relative;
}
.news_div{
  width: 100%;
  height: 100%;
}
.news_box{
   width: 100%;
   height: 100% !important;
}
/* .news_box>>>.dv-scroll-board .rows .index {
  background-color: transparent !important;
} */
.news_ul{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.news_li{
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 20px);
  height: 36px;
  color: #d7dbed;
  margin-left: 10px;
  font-size: 16px;
}
.news_li_txt{
  width: calc(100% -70px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.news_li:nth-child(2n){
  background-color: #051D82;
 
}
.news_li:nth-child(2n-1){
background-color: #041370;
}
.news_index{
  margin: 0 20px;
}
.news_index_active{
  color: #66FFFF;
}
/* 亚运热度排行 */
.ranking{
    margin-top:15px;
    width: calc(100% - 30px);
    height: auto;
    background: url('./../../static/images/ranking.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: relative;
    padding:40px 30px 20px 30px;

}
.rank_box{
   width: 100%;

}
.rank_box_top,.rank_box_bottom{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding:5px;
  box-sizing: border-box;
}
.rank_box_top_item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
}
.rank_box_top_item_div{
  background: url('./../../static/images/item.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 65px;
      display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #E7F3F5;
    font-size: 12px;
    position: relative;
}
.rank_box_top_item_div1{
  background: url('./../../static/images/item.png') no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
      display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #E7F3F5;
  font-size: 12px;
 
    
}
.rank_box_top_item_div1_txt{
   margin-top: 10px;
   opacity: .8;
}
/* 系统访问量 */
.media_guide{
    margin-top:15px;
    width: calc(100% - 30px);
    background: url('./../../static/images/guide.png') no-repeat;
    background-size: 100% 100%;
    height: auto;
    position: relative;
    padding:40px 10px 20px 10px;
    box-sizing: border-box;
}

.system_bottom{
  box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 50%;
}
.system_bottom_div1{
  height: auto;
  width: 100%;
}

.media_guide_div1{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

}
.tip_icon{
  display: inline-block;
  width: 10px;
  height: 18px;
  background: url('./../../static/images/tip_icon.png') no-repeat;
  background-size: 100% 100%;
  vertical-align: text-top;
}
.tip_tit{
  color: #fff;
  margin-left: 10px;
  display: inline-block;
  font-size:16px;
}
.pre_tit{
  font-size: 12px;
  color: #ddd;
  text-align: left;
  width: 110px;
}
.pre_tit_div{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.progress_item{
 
  width: 100%;
  padding: 0;

}
.myprogress{
  background: linear-gradient(to right,#0E5FFF,#00F2EF);
  height: 10px;
  margin-left: 10px;
  margin:5px 0;
  border-radius: 5px;
}
.pro_div{
  width: 100%;
  height: 10px;
  background-color: #1B1A5F;
  border-radius: 5px;
}
.pre_num{
  display: inline-block;
  margin-left: 10px;
  color: #ddd;
  font-size: 12px;
}
.system_btn_div{
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.system_btn_div_left,.system_btn_div_right{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.s_icon{
  width: 50px;
  height: 50px;
}
.jtcx{
  width:158px;
  height: 60px;
  background: url('./../../static/images/box.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
    box-sizing: border-box;
}
.jtcx_div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
.span1{
  color: #ddd;
  font-size: 16px;
}
.span2{
  color: #66FFFF;
  font-size: 16px;
}
#media_content{
  width: 100%;
  height: 300px;

}
.yuyue{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.yuyue_item{
  height: 56px;
  width: 56px;
  margin-left: 10px;
  background: url('./../../static/images/yuyue_item.png') no-repeat;
  background-size: 100% 100%;
  line-height: 56px;
  color: #fff;
  text-align: center;
}
.city_yy{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 3px 0;
  font-size: 16px;
}
.media_service{
    margin-top:15px;
    width: calc(100% - 30px);
    background: url('./../../static/images/per.png') no-repeat;
    background-size: 100% 100%;
    height: auto;
    position: relative;
    padding:40px 10px 20px 10px;
    box-sizing: border-box;
}
.media_con_hot{
    margin-top:15px;
    width: calc(100% - 30px);
    background: url('./../../static/images/per.png') no-repeat;
    background-size: 100% 100%;
    height: auto;
    position: relative;
    padding:40px 10px 20px 10px;
    box-sizing: border-box;
}
.city_elegant{
    margin-top:15px;
    width: calc(100% - 30px);
    background: url('./../../static/images/per.png') no-repeat;
    background-size: 100% 100%;
    height: auto;
    position: relative;
    padding:40px 10px 20px 10px;
    box-sizing: border-box;
    margin-bottom:50px;
}
.yuyue_item:nth-child(1){
  margin-left: 0;
}
</style>
